<template>
  <div id="user-edit">
    <el-form ref="userForm" :model="userForm" :rules="userRules" label-width="100px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="userForm.username" :disabled="editType === 'edit'" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="userForm.password" show-password />
      </el-form-item>
      <el-form-item label="用户昵称">
        <el-input v-model="userForm.nickName" />
      </el-form-item>
      <el-form-item label="角色描述">
        <el-select v-model="userForm.roleId" placeholder="请选择" style="width:100%">
          <el-option
            v-for="item in roleList"
            :key="item.id"
            :label="item.roleDesc"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="头像">
        <el-image
          style="width: 50px; height: 50px"
          :src="avatarUrl"
          :preview-src-list="[avatarUrl]"
        >
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline" />
          </div>
        </el-image>
        <RbUpload
          ref="upload"
          style="float: right;"
          :file-list="fileList"
          :show-file-list="false"
          button-type="text"
          accept=".jpg,.jpeg,.png,.gif,.bmp"
          @on-success="handleUploadSuccess"
        />
      </el-form-item>
      <el-form-item label="邮箱地址">
        <el-input v-model="userForm.email" />
      </el-form-item>
      <el-form-item label="是否启用">
        <el-switch
          v-model="userForm.isActive"
          :disabled="!userInfo.role? false : userInfo.role.roleName === 'admin'"
          active-text="是"
          inactive-text="否"
          active-value="1"
          inactive-value="0"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import RbUpload from '@/layout/components/RbUpload.vue'

export default {
  name: 'UserEdit',
  components: { RbUpload },
  props: {
    userInfo: {
      type: Object,
      require: true,
      default: () => {
        return {}
      }
    },
    roleList: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    },
    editType: {
      type: String,
      required: true,
      validator(val) {
        return ['edit', 'add'].includes(val)
      }
    }
  },
  emit: ['cancel-edit', 'submit-edit'],
  data() {
    return {
      // 文件列表
      fileList: [],
      userForm: {
        username: '',
        password: '',
        nickName: '',
        roleId: '',
        avatar: '',
        email: '',
        isActive: ''
      },
      userRules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 3, max: 32, message: '长度在 3 到 32 个字符', trigger: 'blur' }
        ],
        password: [{
          required: true, message: '密码不能为空', trigger: 'blur'
        }]
      }
    }
  },
  computed: {
    avatarUrl() {
      return process.env.NODE_ENV === 'development' ? process.env.VUE_APP_BASE_API + this.userForm.avatar : this.userForm.avatar
    }
  },
  watch: {
    userInfo: {
      immediate: true,
      deep: true,
      handler(newVal) {
        if (newVal) {
          this.userForm = JSON.parse(JSON.stringify(newVal))
        }
      }
    }
  },
  methods: {
    onSubmit() {
      this.$refs['userForm'].validate((valid) => {
        if (valid) {
          this.$emit('submit-edit', this.userForm, 'user')
          location.reload()
        } else {
          return false
        }
      })
    },
    onCancel() {
      this.$emit('cancel-edit')
    },

    handleUploadSuccess(buildFile) {
      const imgUrl = buildFile.filePath + '/' + buildFile.fileName
      this.$set(this.userForm, 'avatar', imgUrl)
      this.$refs.upload.$refs.rbUploadRef.clearFiles()
    }
  }
}
</script>

<style scoped>

</style>
